<template>
  <baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:1080px" @click="getClickInfo" :scroll-wheel-zoom='true'>
  </baidu-map>
</template>
<script>
export default {
  name: 'TestBaiDu',
  data () {
    return {
      center: {lng: 109.45744048529967, lat: 36.49771311230842},
      zoom: 13
    }
  },
  methods: {
    handler ({BMap, map}) {
      var point = new BMap.Point(115.17715  ,33.64485  )
      map.centerAndZoom(point, 15)//默认地址定位

      var marker = new BMap.Marker(point) // 创建标注
      map.addOverlay(marker) // 将标注添加到地图中



      var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 6, strokeOpacity: 1, Color: 'Red', fillColor: '#f03' })
      map.addOverlay(circle)

      var opts = {
        width : 200,     // 信息窗口宽度
        height: 100,     // 信息窗口高度
        title : "故宫博物院" , // 信息窗口标题
        message:"这里是故宫"
      }
      var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象
      marker.addEventListener("click", function(){
        map.openInfoWindow(infoWindow, point); //开启信息窗口
      });
    },
    getClickInfo (e) {
      // console.log(e.point.lng)
      // console.log(e.point.lat)
      // this.center.lng = e.point.lng
      // this.center.lat = e.point.lat
      console.log("点击标点")
      console.log(e.point.lng)
      console.log(e.point.lat)

    }
  }}
</script>
<style  scoped>

</style>


